<template>
    <!--  <table border="1" align="center" width="400px">-->
    <!--    <caption>-->
    <!--      <h2>购物车</h2>-->
    <!--    </caption>-->

    <!--    <my-checkbox v-model="isSelect">复选框</my-checkbox>-->
    <!--    <tr align="center">-->
    <!--      <td>货名</td>-->
    <!--      <td>单价</td>-->
    <!--      <td>数量</td>-->
    <!--      <td>合计</td>-->
    <!--    </tr>-->
    <!--    <tr align="center" v-for="(user, index) in package1" :key="index">-->
    <!--      <td>-->
    <!--        &lt;!&ndash; 游泳 &ndash;&gt;-->
    <!--        &lt;!&ndash; checkbox vue 被check  &ndash;&gt;-->
    <!--        &lt;!&ndash; checked="false" &ndash;&gt;-->
    <!--        &lt;!&ndash; <input-->
    <!--      -->
    <!--          type="checkbox"-->
    <!--          v-model="hobby2"-->
    <!--          value="游泳"-->
    <!--          @click="handleClick($event, index)"-->
    <!--        /> &ndash;&gt;-->

    <!--        &lt;!&ndash; label="Option 1" &ndash;&gt;-->
    <!--        <el-checkbox v-model="user.checked" size="large" />-->

    <!--        &lt;!&ndash; https://www.cnblogs.com/coderwhytop/p/14436272.html &ndash;&gt;-->
    <!--        &lt;!&ndash; <input type="checkbox" v-model="hobby2" value="健身">健身-->
    <!--		<input type="checkbox" v-model="hobby2" value="旅游">旅游 &ndash;&gt;-->
    <!--      </td>-->
    <!--      <td>{{ user.name }}</td>-->
    <!--      <td>{{ user.price }}</td>-->
    <!--      <td>-->
    <!--        <button @click="sub(index)">-</button>-->
    <!--        {{ user.count }}-->
    <!--        <button @click="add(index)">+</button>-->
    <!--      </td>-->
    <!--      <td>{{ user.price * user.count }}</td>-->
    <!--    </tr>-->
    <!--    <tr align="center">-->
    <!--      <td>总价</td>-->
    <!--      <td colspan="3">{{ computedname }}</td>-->
    <!--    </tr>-->
    <!--  </table>-->
 <!-- align="center"  -->
    <table border="1" width="400px">
        <caption>
            <h2>我的商品</h2>
        </caption>
        <tr align="center">
          <td>选中</td>
            <td>货名</td>
            <td>单价</td>
            <td>数量</td>
            <td>合计</td>
        </tr>
        <tr align="center" v-for="(user, index) in packageMine" :key="index">
            <td>
                <!-- 游泳 -->
                <!-- 自己实现 checkbox -->
                <!-- <input
                  checked="user.checked"
                  type="checkbox"
                  v-model="hobby2"
                  value="游泳"
                /> -->

                <!-- label="Option 1" -->
                <el-checkbox v-model="user.checked" size="large"/>
                <!-- <el-checkbox v-model="checked2" label="Option 2" size="large" /> -->
                <!-- <input type="checkbox" v-model="hobby2" value="健身">健身
                <input type="checkbox" v-model="hobby2" value="旅游">旅游 -->
                <!-- <i v-if="checked" class="iconfont icon-checked"></i>
            <i v-else class="iconfont icon-unchecked"></i> -->
            </td>
            <td>{{ user.name }}</td>
            <td>{{ user.price }}</td>
            <td>
                <button @click="sub(index)">-</button>
                {{ user.count }}
                <button @click="add(index)">+</button>
            </td>
            <td>{{ user.price * user.count }}</td>
        </tr>
        <tr align="center">
            <td>总价</td>
            <td colspan="3">{{ computedname }}</td>
        </tr>
    </table>

 <button @click="rmAll">清空购物车</button>
    <!--  <button @click="addCommodity">添加商品</button>-->

    <!-- checkbox  全都会打勾 -->
    <!-- 我的商品  -->
</template>

<script>
    // import { reactive, toRefs, computed } from "vue";
    import {reactive, toRefs, computed} from "vue";
    // import { ref } from "vue";
    // import MyCheckbox from myCheckboxVue
    // import myCheckboxVue from "./my-checkbox.vue";
    // import { useCheckbox } from './Checkbox.vue';
    // import { useCheckbox } from './useCheckbox';

    // import { useCheckbox } from '';
    // useCheckbox
    // ObjUtil
    // import ObjUtil from "../util/ObjUtil";

    export default {
        name: 'AniCheckboxGroup',
        props: {
            modelValue: {
                type: [Array],
                default: () => undefined
            }
        },
        emits: ['change'],
        setup(props, {emit}) {
            const model = computed({
                get() {
                    return props.modelValue;
                },
                set(val) {
                    emit("update:modelValue", val);
                },
            });


            let packageMine = model

            const state = reactive({
                packageMine: packageMine
            });

            const sub = (index) => {
                console.log("sub")
                if (state.packageMine[index].count > 0) {
                    state.packageMine[index].count--;
                }
                // if (packageMine[index].count > 0) {
                //   packageMine[index].count--;
                // }
            };
            const add = (index) => {
                state.packageMine[index].count++;
            };

 const rmAll = () => {
     state.packageMine=[]
                // state.packageMine[index].count++;
            };
            const computedname = computed(() => {
                let prices = 0;
                for (let i = 0; i < state.packageMine.length; i++) {
                  let now= state.packageMine[i]
                  if(now.checked){
                    prices += state.packageMine[i].price * state.packageMine[i].count;
                  }

                }
                return prices;
            });

            return {
                // model,
                ...toRefs(state),
                add,
                sub,
                computedname,
                rmAll

                // packageMine
            }
        }
    }

    // export default {
    //   components() {
    //     // myCheckboxVue;
    //   },
    //
    //   // props
    //   setup() {
    //     const isSelect = ref(false);
    //
    //     const state = reactive({
    //       package1: [
    //         {
    //           name: "华为mate30",
    //           price: 4566,
    //           count: 2,
    //           checked: false,
    //         },
    //         {
    //           name: "华为mate40",
    //           price: 4166,
    //           count: 3,
    //           checked: false,
    //         },
    //         {
    //           name: "苹果X",
    //           price: 5200,
    //           count: 2,
    //           checked: false,
    //         },
    //         {
    //           name: "OPPO",
    //           price: 2180,
    //           count: 4,
    //           checked: false,
    //         },
    //       ],
    //       packageMine: [],
    //     });
    //     const sub = (index) => {
    //       if (state.package1[index].count > 0) {
    //         state.package1[index].count--;
    //       }
    //     };
    //     const add = (index) => {
    //       state.package1[index].count++;
    //     };
    //     // const addCommodity = (evt) => {
    //     //   // evt.pr
    //     //   // 防止事件冒泡
    //     //   evt.preventDefault();
    //     //   // 没用啊
    //     //   console.log("======");
    //     //   console.log("addCommodity");
    //     //   console.log("evt");
    //     //   console.log(evt);
    //     //   // state.package1.forEach()
    //
    //     //   for (let i = 0; i < state.package1.length; i++) {
    //     //     let pack = state.package1[i];
    //     //     console.log(pack);
    //     //     if (pack.checked) {
    //     //       // pack.console
    //     //       let clonedPack = ObjUtil.deepClone(pack);
    //     //       state.packageMine.push(clonedPack);
    //     //     }
    //     //     // 全部取消选中
    //     //     pack.checked = false;
    //     //   }
    //
    //     //   //  state.packageMine=[]
    //     //   // state.package1.forEach((pack)=>{
    //     //   //   console.log(pack);
    //     //   //   if(pack.checked){
    //     //   //      state.packageMine.push(pack)
    //     //   //   }
    //     //   // })
    //
    //     //   // 这里有循环 就会全部选中
    //     //   //  state.package1.forEach((pack)=>{
    //     //   //   console.log(pack);
    //     //   //   // if(pack.checked){
    //     //   //   //    state.packageMine.push(pack)
    //     //   //   // }
    //     //   // })
    //
    //     //   // state.packageMine=    state.package1.filter(pack=>{
    //     //   //  return pack.checked
    //     //   // })
    //     //   // let commodity = {
    //     //   //   name: "苹果X",
    //     //   //   price: 5200,
    //     //   //   count: 2,
    //     //   // };
    //     //   // state.package1.push(commodity);
    //     //   // state.package1[index].count++
    //     // };
    //
    //     const handleClick = (ev, index) => {
    //       let checkedBefore = state.package1[index].checked;
    //       console.log("checkedBefore");
    //       console.log(checkedBefore);
    //       // if (checkedBefore==="true") {
    //       if (checkedBefore) {
    //         state.package1[index].checked = false;
    //       } else {
    //         state.package1[index].checked = true;
    //       }
    //       console.log("check change ");
    //       // // var that = this;
    //       // console.log("ev");
    //       //   console.log(ev);
    //       // setTimeout(function () {
    //       //   // console.log(
    //       //   //   "this.hobby2",
    //       //   //   ev.target.checked,
    //       //   //   that.hobby2.length,
    //       //   //   that.hobby2
    //       //   // );
    //       //   console.log("ev.target");
    //       //     console.log(ev.target);
    //       //        console.log("ev.target.checked");
    //       //       //  let
    //       //     console.log(ev.target.checked);
    //       //     state.package1[index].checked=ev.target.checked
    //       //   if (!ev.target.checked) {
    //       //     // if (that.hobby2.length == 1) {
    //       //     //   that.lastcheckval = that.hobby2[0];
    //       //     // }
    //       //     // if (that.hobby2.length == 0) {
    //       //     //   that.hobby2.push(that.lastcheckval);
    //       //     // }
    //       //   }
    //       // }, 1);
    //     };
    //
    //     const computedname = computed(() => {
    //       let prices = 0;
    //       for (let i = 0; i < state.package1.length; i++) {
    //         prices += state.package1[i].price * state.package1[i].count;
    //       }
    //       return prices;
    //     });
    //     //  useCheckbox(props)
    //     return {
    //       isSelect,
    //       ...toRefs(state),
    //       computedname,
    //       sub,
    //       add,
    //     //   addCommodity,
    //       handleClick,
    //     };
    //   },
    // };
</script>
